<template>
    <div class="connectContainer">
      <div style="text-align: center;margin-bottom: 30px;">
        <h1>数据库连接配置</h1>
      </div>
      <el-form
        ref="form"
        label-width="100px"
      >
        <el-form-item label="数据库类型：">
          <el-select v-model="database.type" placeholder="请选择" class="inputBox">
            <el-option
              v-for="item in dataTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据库地址：">
          <el-input v-model="database.url" placeholder="数据库地址..." class="inputBox"></el-input>
        </el-form-item>
        <el-form-item label="数据库端口：">
          <el-input v-model="database.port" placeholder="数据库端口..." class="inputBox"></el-input>
        </el-form-item>
        <el-form-item label="数据库名称：">
          <el-input v-model="database.dbName" placeholder="数据库名称..." class="inputBox"></el-input>
        </el-form-item>
        <el-form-item label="用户名：">
          <el-input v-model="database.username" placeholder="用户名..." class="inputBox"></el-input>
        </el-form-item>
        <el-form-item label="密码：">
          <el-input v-model="database.password" placeholder="密码..." class="inputBox"></el-input>
        </el-form-item>
      </el-form>
      <div style="text-align: center">
        <el-button type="primary" @click="initConnect" round>连接数据库</el-button>
        <el-button type="success" v-if="hasConnect" @click="toToolMenuPage" round>工具菜单页</el-button>
      </div>
    </div>
</template>

<script>
    import {get} from "../utils/httpUtil";

    export default {
        name: "DBConnect"
      ,data () {
          return {
            database: {
              type: "mysql"
              ,url: "localhost"
              ,port: "3306"
              ,dbName: "test"
              ,username: "root"
              ,password: "751842"
            }
            ,dataTypeList: [
              {
                label: 'mysql'
                ,value: 'mysql'
              },{
                label: 'sqlServer'
                ,value: 'sqlServer'
              }
            ]
            ,dbToolMenuUrl: '/dbToolMenu'
            ,hasConnect: false
          }
      }
      ,methods: {
          initPageData() {
            get('/db/getConnectData', {}).then(response => {
              if (response.data.result) {
                this.hasConnect = true
                this.database.type = response.data.data.type
                this.database.url = response.data.data.url
                this.database.port = response.data.data.port
                this.database.dbName = response.data.data.dbName
                this.database.username = response.data.data.username
                this.database.password = response.data.data.password
              }
            })
          },
          initConnect() {
            get("/db/initConnect", this.database).then(response => {
              if (response.data.result) {
                this.$router.push(this.dbToolMenuUrl)
              }
            })
          }
          ,toToolMenuPage() {
              this.$router.push(this.dbToolMenuUrl)
          }
      }
      ,created() {
        this.initPageData()
      }
    }
</script>

<style scoped>
  .connectContainer {
    text-align: center;
    width: 100%;
  }
  .inputBox {
    width: 400px;
    margin-left: 30px;
  }
</style>
